<template>
  <div class="order-box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <el-form :inline="true" :model="txtlist" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input
                v-model="txtlist.orderSn"
                placeholder="请填写订单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单类型">
              <el-select
                size="mini"
                v-model="txtlist.orderType"
                placeholder="订单类型"
              >
                <el-option label="正常订单" value="0"></el-option>
                <el-option label="秒杀订单" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付方式">
              <el-select
                size="mini"
                v-model="txtlist.payType"
                placeholder="支付方式"
              >
                <el-option label="未支付" value="0"></el-option>
                <el-option label="支付宝" value="1"></el-option>
                <el-option label="微信" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-select
                size="mini"
                v-model="txtlist.status"
                placeholder="订单状态"
              >
                <el-option label="待付款" value="0"></el-option>
                <el-option label="待发货" value="1"></el-option>
                <el-option label="已发货" value="2"></el-option>
                <el-option label="已完成" value="3"></el-option>
                <el-option label="已关闭" value="4"></el-option>
                <el-option label="无效订单" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <div class="grid-content bg-purple">
              <el-form-item>
                <el-button @click="resetForm('list')" size="mini"
                  >重置</el-button
                >
                <el-button type="primary" @click="seach" size="mini"
                  >查询</el-button
                >
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" width="50" align="center" fixed>
        </el-table-column>
        <el-table-column
          prop="orderSn"
          label="订单编号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="payType"
          label="支付方式"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <div
              style="background: #909399; color: #fff; padding: 10px"
              v-if="scope.row.payType === 0"
            >
              未支付
            </div>
            <div v-else-if="scope.row.payType === 1">
              <img
                src="@/icons/icon/alipay.png"
                alt=""
                style="width: 25px; height: 25px"
              />
            </div>
            <div v-else-if="scope.row.payType === 2">
              <img
                src="@/icons/icon/wxpay.png"
                alt=""
                style="width: 25px; height: 25px"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <div
              style="
                width: 80px;
                margin: 0 auto;
                padding: 10px;
                background-color: #f56c6c;
                color: #fff;
              "
              v-if="scope.row.status === 0"
            >
              待付款
            </div>
            <div
              style="
                width: 80px;
                margin: 0 auto;
                padding: 10px;
                color: #fff;
                background-color: #e6a23c;
              "
              v-else-if="scope.row.status === 1"
            >
              待发货
            </div>
            <div
              style="
                width: 80px;
                margin: 0 auto;
                padding: 10px;
                background-color: #ecf5ff;
                color: #409eff;
              "
              v-else-if="scope.row.status === 2"
            >
              已发货
            </div>
            <div
              style="
                width: 80px;
                margin: 0 auto;
                padding: 10px;
                color: #fff;
                background-color: #409eff;
              "
              v-else-if="scope.row.status === 3"
            >
              已完成
            </div>
            <div
              style="
                width: 80px;
                margin: 0 auto;
                padding: 10px;
                color: #fff;
                background-color: #909399;
              "
              v-else-if="scope.row.status === 4"
            >
              已关闭
            </div>
            <div
              style="
                width: 80px;
                margin: 0 auto;
                background-color: #f4f4f5;
                color: #909399;
                padding: 0 10px;
              "
              v-else-if="scope.row.status === 5"
            >
              无效订单
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="添加时间"
          width="240"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="memberUsername"
          label="用户账号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orderType"
          label="订单类型"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.orderType === null" class="template-order">
              正常订单
            </div>
            <div v-if="scope.row.orderType === 0" class="template-order">
              正常订单
            </div>
            <div v-else-if="scope.row.orderType === 1" class="template-order">
              秒杀订单
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注" width="150" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="primary"
              size="small"
              icon="el-icon-view"
              >查看订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="doot.start"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="doot.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
    </el-card>
  </div>
</template>

<script >
import { findOrdersByPage, orderDetail } from "@/api/order/index";

export default {
  data() {
    return {
      list: [],
      txtlist: {
        orderSn: "",
        orderType: "",
        payType: "",
        status: "",
      },
      doot: {
        start: 1,
        limit: 10,
      },
      total: 0,
    };
  },
  created() {
    this.findOrdersByPageAPI();
  },
  components: {},

  computed: {},

  mounted() {},

  methods: {
    //   根据id查询商品详情
    handleClick(row) {
      this.$router.push({ path: "/order/orderxq", query: { id: row.id } });
      // this.$router.push({path:'/example/addarticle',query:{id:row.id}})
    },
    //   查询
    seach() {
      var _this = this;
      this.$data.doot = this.$options.data().doot;
      findOrdersByPage(this.doot.start, this.doot.limit, this.txtlist).then(
        (res) => {
          console.log(res);
          if (res.success) {
            _this.list = res.data.rows;
            _this.total = res.data.total;
          } else {
            _this.$message.error("获取列表失败");
          }
        }
      );
    },
    // 重置
    resetForm(e) {
      this.$data.txtlist = this.$options.data().txtlist;
    },
    findOrdersByPageAPI() {
      var _this = this;
      findOrdersByPage(this.doot.start, this.doot.limit).then((res) => {
        console.log(res);
        if (res.success) {
          _this.list = res.data.rows;
          _this.total = res.data.total;
        } else {
          _this.$message.error("获取列表失败");
        }
      });
    },
    handleSizeChange(val) {
      var _this = this;
      this.doot.limit = val;
      this.findOrdersByPageAPI();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      var _this = this;

      this.doot.start = val;
      this.findOrdersByPageAPI();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.order-box {
  margin: 30px;
}
.template-order {
  padding: 0 10px;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}
</style>